<template>
  <V-CommonHeaderLeft>
    <div class="sale">
      <Navigation :msg="navMsg"></Navigation>
      <div>
        <ReportCondition></ReportCondition>
        <el-tabs type="border-card"
                 @tab-click='setEcharsData'>
          <el-tab-pane label="订货单">
            <div class="card-box"
                 :style="{ height: tableHeight }">
              <div class="order-search">
                <el-select v-model="inputValue.typeValue"
                           placeholder="客户类型"
                           size='small'
                           filterable
                           clearable>
                  <el-option v-for="item in options.type"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="inputValue.customerValue"
                           :value="valueTitle"
                           placeholder="客户区域"
                           class="select-tree"
                           size='small'
                           clearable>
                  <el-option :label="valueTitle"
                             :value="valueTitle">
                    <el-tree :data="options.customer"
                             :props="defaultProps"
                             @node-click="handleNodeClick"></el-tree>
                  </el-option>
                </el-select>
                <el-select v-model="inputValue.belongValue"
                           placeholder="所属员工"
                           size='small'
                           clearable
                           filterable>
                  <el-option v-for="item in options.belong"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="datum">
                <div v-for="(item,index) in 7"
                     :key="index"
                     class="item">
                  <p class="title">订货单数</p>
                  <p class="num">0</p>
                </div>
                <div class="item">
                  <div class="title">
                    <span>未收款金额</span>
                    <div class="tips-box">
                      <span class="iconfont icon-test102"></span>
                      <div class="tips">
                        <div class="tips-text">
                          <p>滞销商品数：默认指近30天无销量、但有库存的商品数。可在《滞销商品统计》页面自行设置滞销品的统计时间范围及销量值。</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="num">￥0.00</p>
                </div>
              </div>
              <div class="timeButton">
                <el-button-group>
                  <el-button :type="buttonNum == 1 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(1)">
                    按规格统计
                  </el-button>
                  <el-button :type="buttonNum == 2 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(2)">
                    按商品统计
                  </el-button>
                  <el-button :type="buttonNum == 3 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(3)">
                    按分类统计
                  </el-button>
                  <el-button :type="buttonNum == 4 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(4)">
                    按品牌统计
                  </el-button>
                </el-button-group>
              </div>
              <div class="echarts-dom"></div>
              <div class="details">
                <el-collapse accordion
                             @change="handleChange">
                  <el-collapse-item>
                    <template slot="title">
                      <span class="title-head">数据明细</span>
                      <span class="iconfont icon-test251"></span>
                    </template>
                    <div class="details-table">
                      <el-table :data='tableData'
                                style="width: 100%"
                                border
                                class="table-class">
                        <el-table-column prop="date"
                                         label="商品名称"
                                         min-width="26%">
                        </el-table-column>
                        <el-table-column prop="orderNum"
                                         label="订货单数"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="returnNum"
                                         label="退货单数"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="orderCustomer"
                                         label="订货数量"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="returnCustomer"
                                         label="退货数量"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="orderCash"
                                         label="订货金额"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="returnCash"
                                         label="退货金额"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="allCash"
                                         label="金额小计"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                      </el-table>
                      <Paging :msg="5"
                              ref="fn"></Paging>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="退货单">
            <div class="card-box"
                 :style="{ height: tableHeight }">
              <div class="order-search">
                <el-select v-model="inputValue.typeValue"
                           placeholder="客户类型"
                           size='small'
                           filterable
                           clearable>
                  <el-option v-for="item in options.type"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="inputValue.customerValue"
                           :value="valueTitle"
                           placeholder="客户区域"
                           class="select-tree"
                           size='small'
                           clearable>
                  <el-option :label="valueTitle"
                             :value="valueTitle">
                    <el-tree :data="options.customer"
                             :props="defaultProps"
                             @node-click="handleNodeClick"></el-tree>
                  </el-option>
                </el-select>
                <el-select v-model="inputValue.belongValue"
                           placeholder="所属员工"
                           size='small'
                           clearable
                           filterable>
                  <el-option v-for="item in options.belong"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="datum">
                <div v-for="(item,index) in 7"
                     :key="index"
                     class="item">
                  <p class="title">订货单数</p>
                  <p class="num">0</p>
                </div>
                <div class="item">
                  <div class="title">
                    <span>未收款金额</span>
                    <div class="tips-box">
                      <span class="iconfont icon-test102"></span>
                      <div class="tips">
                        <div class="tips-text">
                          <p>未收款金额=待收款+待审核</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="num">￥0.00</p>
                </div>
              </div>
              <div class="timeButton">
                <el-button-group>
                  <el-button :type="buttonNum == 1 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(1)">
                    按规格统计
                  </el-button>
                  <el-button :type="buttonNum == 2 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(2)">
                    按商品统计
                  </el-button>
                  <el-button :type="buttonNum == 3 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(3)">
                    按分类统计
                  </el-button>
                  <el-button :type="buttonNum == 4 ? 'primary' : ''"
                             size="medium"
                             @click="switchButton(4)">
                    按品牌统计
                  </el-button>
                </el-button-group>
              </div>
              <div class="echarts-dom-return"></div>
              <div class="details">
                <el-collapse accordion
                             @change="handleChange">
                  <el-collapse-item>
                    <template slot="title">
                      <span class="title-head">数据明细</span>
                      <span class="iconfont icon-test251"></span>
                    </template>
                    <div class="details-table">
                      <el-table :data='tableData'
                                style="width: 100%"
                                border
                                class="table-class">
                        <el-table-column prop="date"
                                         label="商品名称"
                                         min-width="26%">
                        </el-table-column>
                        <el-table-column prop="orderNum"
                                         label="订货单数"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="returnNum"
                                         label="退货单数"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="orderCustomer"
                                         label="订货数量"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="returnCustomer"
                                         label="退货数量"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="orderCash"
                                         label="订货金额"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="returnCash"
                                         label="退货金额"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                        <el-table-column prop="allCash"
                                         label="金额小计"
                                         sortable
                                         min-width="10%">
                        </el-table-column>
                      </el-table>
                      <Paging :msg="5"
                              ref="fn"></Paging>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </V-CommonHeaderLeft>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'
import ReportCondition from '../reportCondition/ReportCondition'
import Paging from '@/components/common/paging/Paging'
/* eslint-disable */
import echarts from 'echarts'
export default {
  data () {
    return {
      tableHeight: '',
      valueTitle: '',
      buttonNum: '1',
      tableData: [{
        date: '2019-06-13'
      }, {
        date: '2019-06-13'
      }],
      options: {
        type: [{
          value: '选项1',
          label: '代理商'
        }, {
          value: '选项2',
          label: '批发商'
        }, {
          value: '选项3',
          label: '零售'
        }],
        customer: [{
          label: '华东区',
          children: [{
            label: '上海'
          }, {
            label: '江苏'
          }, {
            label: '浙江'
          }, {
            label: '福建'
          }]
        }, {
          label: '华南区',
          children: [{
            label: '芜湖'
          }, {
            label: '广东'
          }, {
            label: '广西'
          }, {
            label: '海南'
          }]
        }],
        belong: [{
          value: '选项1',
          label: '小圆'
        }, {
          value: '选项2',
          label: '小源'
        }, {
          value: '选项3',
          label: '小云'
        }]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      inputValue: {
        typeValue: '',
        customerValue: '',
        belongValue: ''
      },
      navMsg: [
        {
          name: '报表',
          path: '/orderReport'
        },
        {
          name: '商品销售',
          path: ''
        }
      ]
    }
  },
  components: {
    Paging,
    Navigation,
    ReportCondition,
    VCommonHeaderLeft
  },
  created () {
    this.getHight()
    window.addEventListener('resize', this.getHight)
  },
  updated () {
    this.setEcharsData()
  },
  destroyed () {
    window.removeEventListener('resize', this.getHight)
  },
  mounted () {
    this.clearTree()
  },
  methods: {
    getHight () {
      this.tableHeight = window.innerHeight - 227 + 'px'
    },
    clearTree () {
      // 给select tree 单独清除padding
      let selectInput = document.getElementsByClassName('el-tree')
      for (let i = 0; i < selectInput.length; i++) {
        selectInput[i].parentNode.setAttribute('style', 'padding:0;')
      }
    },
    switchButton (value) {
      this.buttonNum = value
    },
    setEcharsData (value = {
      $el: {
        id: 1
      }
    }) {
      // console.log(value.$el.id)
      let data = {
        xAxis: ['沐浴液', '背心式文胸', '男童凉鞋', '男童凉鞋', '男童凉鞋', '男童凉鞋'],
        totalMoney: [62750, 5000, 1050, 250, 220, 220, 130],
        orderNum: [1255, 100, 21, 5, 11, 4, 1]
      }
      if (value.$el.id === 'pane-1') {
        this.drawEchars('echarts-dom-return', data)
      } else {
        this.drawEchars('echarts-dom', data)
      }
    },
    drawEchars (className, data) {
      this.$nextTick(_ => {
        let echars = document.getElementsByClassName(className)[0]
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: data.xAxis,
              nameTextStyle: {
                color: '#999'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '订货金额/元',
              scale: true,
              nameTextStyle: {
                color: '#999'
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#999'
                }
              },
              axisTick: {
                show: false
              },
              boundaryGap: [0, 0.2]
            },
            {
              type: 'value',
              name: '数量',
              nameTextStyle: {
                color: '#999'
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '合计金额',
              type: 'bar',
              barWidth: '20%',
              barCategoryGap: '20%',
              itemStyle: {
                normal: {
                  color: '#20ade5'
                  // color: function (params) {
                  //   var colorList = ['rgb(205,85,85)', 'rgb(210,105,30)', 'rgb(0,139,0)', 'rgb(178,58,238)', 'rgb(54,100,139)'];
                  //   return colorList[params.dataIndex]
                  // }
                }
              },
              data: data.totalMoney
            },
            {
              name: '订货笔数',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: 'default',
                    color: 'transparent'
                  },
                  lineStyle: {
                    color: '#F7F709'
                  }
                }
              },
              data: data.orderNum
            }
          ]
        }
        this.$echarts.init(echars).setOption(option)
      })
    },
    handleChange (val) {
      let icon = document.getElementsByClassName('icon-test251')[0]
      let text = document.getElementsByClassName('title-head')[0]
      val !== '' ? icon.style.cssText = 'transform: rotateX(180deg);' : icon.style.cssText = 'transform: rotateX(0deg);'
      val !== '' ? text.innerText = '点击收起' : text.innerText = '数据明细'
    },
    handleNodeClick (node) {
      this.inputValue.customerValue = node.label
      // console.log(node)
    }
  }
}
</script>
<style lang="scss" scoped>
.sale {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  /deep/ .el-tabs {
    .el-tabs__content {
      padding: 0;
      .card-box {
        width: 100%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover {
          overflow-y: overlay;
        }
        &::-webkit-scrollbar {
          width: 8px;
          height: 50%;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: rgba(0, 0, 0, 0.2);
        }
        &::-webkit-scrollbar-track {
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0.1);
        }
        .order-search {
          color: #666;
          padding: 16px 24px;
          .el-select {
            width: 140px;
            min-height: 32px;
            height: 32px;
            margin-right: 12px;
          }
        }
        .datum {
          display: flex;
          align-items: center;
          .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100px;
            border-right: 1px solid #e3e3e3;
            .title {
              color: #666;
              font-size: 12px;
              line-height: 2;
              .tips-box {
                display: inline-block;
                position: relative;
                cursor: pointer;
                line-height: 1;
                .icon-test102 {
                  width: 16px;
                  height: 16px;
                  color: #fff;
                  background-color: #d2d2d2;
                  border-radius: 50%;
                  margin-left: 4px;
                }
                &:hover {
                  .tips {
                    display: block;
                  }
                }
                .tips {
                  display: none;
                  position: absolute;
                  top: 30px;
                  left: -234px;
                  right: auto;
                  z-index: 2;
                  font-size: 12px;
                  color: #333;
                  background: #fff;
                  border: 1px solid #e3e3e3;
                  border-radius: 2px;
                  padding: 10px;
                  width: 270px;
                  &:before {
                    content: "";
                    position: absolute;
                    top: -6px;
                    right: 45px;
                    width: 10px;
                    height: 10px;
                    transform: rotate(-45deg);
                    background: #fff;
                    border-width: 1px 1px 0 0;
                    border-style: solid;
                    border-color: #e3e3e3;
                  }
                  .tips-text {
                    color: #999;
                    line-height: 2;
                    text-align: center;
                  }
                }
              }
            }
            .num {
              font-size: 18px;
              line-height: 2;
              font-weight: 600;
              margin-right: 2px;
            }
            &:last-child {
              .num {
                color: #ff3838;
              }
            }
          }
        }
        .timeButton {
          display: flex;
          padding: 16px 24px;
          justify-content: flex-end;
        }
        .echarts-dom,
        .echarts-dom-return {
          width: 100%;
          height: 310px;
        }
        .details {
          .el-collapse {
            .el-collapse-item {
              .el-collapse-item__header {
                display: flex;
                justify-content: center;
                align-items: center;
                i {
                  display: none;
                }
                .icon-test251 {
                  display: inline-block;
                  width: 12px;
                  height: 12px;
                  line-height: 12px;
                  color: #666;
                  margin-left: 10px;
                }
              }
            }
          }
          .details-table {
            @mixin el-common($el-color, $el-height, $el-class) {
              padding: 4px 0 4px 24px;
              color: $el-color;
              height: $el-height;
              line-height: $el-height;
              &:first-child {
                padding: 0;
                text-align: center;
                span {
                  width: 16px;
                  height: 16px;
                }
              }
              &:not(:first-child) {
                #{$el-class} {
                  width: 100%;
                  line-height: 20px;
                  display: -webkit-box;
                  overflow: hidden;
                  white-space: normal !important;
                  text-overflow: ellipsis;
                  word-wrap: break-word;
                  word-break: break-all;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
            }
            /deep/ .table-class {
              font-size: 12px;
              tr {
                td {
                  @include el-common(
                    $el-color: #333,
                    $el-height: 40px,
                    $el-class: "span"
                  );
                }
                th {
                  @include el-common(
                    $el-color: #666,
                    $el-height: 50px,
                    $el-class: ".cell"
                  );
                  border-right: none;
                  font-weight: normal;
                  background-color: #fcfcfc;
                }
              }
            }
          }
        }
      }
    }
  }
}
.el-select-dropdown {
  z-index: 1;
  .el-scrollbar {
    background-color: #f00;
    .el-scrollbar__view {
      .el-select-dropdown__item {
        height: auto;
        max-height: 320px;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover {
          overflow-y: overlay;
        }
        &::-webkit-scrollbar {
          width: 8px;
          height: 50%;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: rgba(0, 0, 0, 0.2);
        }
        &::-webkit-scrollbar-track {
          border-radius: 0;
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
    }
    .selected {
      font-weight: normal;
    }
  }
}
</style>
